<template>
	<view class="container">
		<view class="search" @tap="goToSearch">
			<view class="search_bar">
				<image src="@/static/index/search_icon.png" mode=""></image>
				请输入关键词搜索
			</view>
			<view class="search_notice">
				<view>
					<image src="@/static/index/notice_icon.png" mode="" />
				</view>
				消息
			</view>
		</view>
		<view class="tabs">
			<view v-for="tab in categories" :class="{tab: true, active: tabActive === tab.id}"
				@click="tabChange(tab.id)" :key="tab.id">
				<view class="tab">
					<view>
						{{tab.name}}
					</view>
					<image src="@/static/tuoyuan.png" class="tab-img" />
				</view>

			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<uni-swiper-dot field="content" :mode="'default'">
				<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item v-for="item in swiperList">
						<image :src="BASE_OSS_URL + item.image" @click="gotoPage(item.url)" />
					</swiper-item>
				</swiper>
			</uni-swiper-dot>

		</view>
		<!-- 商家入驻 -->
		<view class="icard">
			<view class="icard_item">
				<view class="icard_right">
					<view class="icard_title" @click="settled">商家入驻</view>
					<view class="icard_desc">实现生意新增长</view>
				</view>
			</view>
			<view class="icard_item">
				<view class="icard_right">
					<view class="icard_title">我要赚钱</view>
					<view class="icard_desc">最新赚钱好商机</view>
				</view>
			</view>
		</view>
		<!-- 商家信息 -->
		<template v-for="shopItem in shopList" :key="shopItem.id">
			<view>
				<ShopItem :shopItem="shopItem" />
			</view>
		</template>
		<view class="grap_order_center">
			<image src="@/static/index/grab_order_center.png" mode="" />
		</view>
		<!-- <view class="grap_order_box">
			<view class="grap_order_item">

			</view>
			<view class="grap_order_date">
				发布时间：2023-09-09 13:40:20
			</view>
		</view> -->

		<Tabbar />
	</view>
</template>

<script setup>
	import ShopItem from '@/components/ShopItem/ShopItem.vue'
	import Tabbar from '@/components/Tabbar/index.vue'
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import request, {
		BASE_OSS_URL
	} from '../../utils/request';
	import {
		indexShop,
		indexSwiper
	} from '@/service'
	import {
		indexCategories
	} from '@/service/home'

	const indicatorDots = true
	const autoplay = true
	const interval = 2000
	const duration = 500
	const tabs = [{
		value: 1,
		label: "推荐"
	}, {
		value: 2,
		label: "美发"
	}, {
		value: 3,
		label: "家政"
	}, {
		value: 4,
		label: "餐饮"
	}, {
		value: 5,
		label: "摄影"
	}, {
		value: 6,
		label: "房产"
	}]

	const categories = ref([{}])
	const getCategories = async () => {
		const res = await indexCategories()
		categories.value = [{
			id: 0,
			name: "全部"
		}, ...res]
	}
	const tabActive = ref(0)
	const tabChange = (value) => {
		tabActive.value = value
		shopParams.value.categories_id = value
		getShop({
			...shopParams.value
		})
	}
	const goToSearch = () => {
		uni.navigateTo({
			url: '/pages/Search/Search'
		})
	}
	const swiperList = ref([])
	const getSwiper = async () => {
		const res = await indexSwiper()
		swiperList.value = res || []
	}
	const shopList = ref([])
	const getShop = async (data) => {
		const res = await indexShop(data)
		shopList.value = res.data || []

	}
	const gotoPage = (url) => {
		uni.navigateTo({
			url
		})
	}
	const shopParams = ref({
		sort: "sales",
		city: "",
		latitude: "",
		longitude: "",
	})
	onShow(async () => {
		uni.hideTabBar()
		const {
			latitude,
			longitude
		} = await uni.getLocation()
		shopParams.value.latitude = latitude
		shopParams.value.longitude = longitude
		getCategories()
		getSwiper()
		getShop({
			...shopParams.value
		})
	})

	// 商家入驻
	const settled = () => {
		uni.navigateTo({
			url: '/pages/Settlement/Settlement'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(90deg, #012148, #011434);
		padding: 24rpx;
		padding-bottom: 140rpx;
		min-height: 100vh;

		.search {
			display: flex;
			// height: 90rpx;

			.search_bar {
				image {
					width: 32rpx;
					height: 31rpx;
					margin: 0 16rpx 0 18rpx;
				}

				flex: 1;
				background: url(https://haoyingshou.oss-cn-guangzhou.aliyuncs.com/search_bc.png) no-repeat center / cover;
				color: #264C96;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				padding-left: 16rpx;
				box-sizing: border-box;
			}

			.search_notice {
				text-align: center;
				color: $title-color;
				padding-right: 20rpx;
				padding-left: 20rpx;
				font-family: FZLanTingHeiS-R-GB;
				font-weight: 400;
				font-size: 22rpx;

				image {
					width: 34rpx;
					height: 38rpx;
				}
			}
		}

		.tabs {
			display: flex;
			justify-content: space-between;
			color: $content-color;
			font-size: 30rpx;
			padding: 18rpx 20rpx 40rpx;

			.tab {
				text-align: center;
				line-height: 30rpx;

				.tab-img {
					width: 33rpx;
					height: 12rpx;
					display: none;
				}
			}

			.active {
				position: relative;
				color: $title-color;

				.tab-img {
					display: inline-block;
				}
			}
		}

		.banner {
			swiper {
				swiper-item {
					height: 234rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}
			}
		}


		.icard {
			margin-top: 20rpx;
			display: flex;

			.icard_item {
				padding: 40rpx 0 42rpx 106rpx;
				box-sizing: border-box;
				height: 150rpx;
				flex: 1;
				display: flex;
				align-items: center;

				&:first-of-type {
					margin-right: 14rpx;
					background: url(https://haoyingshou.oss-cn-guangzhou.aliyuncs.com/shangjia.png) left center / 100% 100%;
				}

				&:last-of-type {
					margin-right: 14rpx;
					background: url(https://haoyingshou.oss-cn-guangzhou.aliyuncs.com/zhuanqian.png) left center / 100% 100%;
				}

				.icard_right {
					flex: 1;
					margin-left: 30rpx;

					.icard_title {
						font-size: 30rpx;
						color: #00C1FF;
					}

					.icard_desc {
						color: #3A75C0;
						font-size: 24rpx;
					}
				}
			}
		}

		.card {
			display: flex;
			padding: 22rpx 16rpx 28rpx 20rpx;
			background: #112959;
			box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0, 14, 41, 0.3);
			border-radius: 20rpx;
			margin-top: 22rpx;

			.card_left {
				width: 100rpx;
				height: 100rpx;
				background: red;
			}

			.card_right {
				margin-left: 18rpx;
				flex: 1;

				.card_right_top {
					display: flex;
					margin-bottom: 4rpx;
					justify-content: space-between;

					.card_title {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #00C1FF;
					}

					.card_info {
						font-family: FZLanTingHeiS-R-GB;
						font-weight: 400;
						font-size: 22rpx;
						color: #3A75C0;
						margin-top: 20rpx;
					}

					.card_navigation {
						text-align: center;

						image {
							width: 52rpx;
							height: 52rpx;
							background-color: #00C1FF;
							margin-bottom: 8rpx;
							vertical-align: top;
						}

						font-family: FZLanTingHeiS-R-GB;
						font-weight: 400;
						font-size: 20rpx;
						color: #00C1FF;
					}
				}

				.card_detail {
					margin-top: 36rpx;

					.card_detail_title {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #01B3EE;
					}

					.card_detail_content {
						display: flex;
						justify-content: space-between;
						margin-top: 24rpx;

						.card_price {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #F25C01;
						}

						.card_sale {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 20rpx;
							color: #3A75C0;
						}
					}
				}

				.card_more {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 22rpx;
					color: #3A75C0;
					line-height: 48rpx;
				}
			}
		}

		.grap_order_center {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 36rpx;
			margin-bottom: 40rpx;

			image {
				height: 80rpx;
			}
		}

		.grap_order_box {
			margin-bottom: 40rpx;

			.grap_order_item {
				height: 102rpx;
				background: #112959;
				box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0, 14, 41, 0.3);
				border-radius: 15rpx;
			}

			.grap_order_date {
				font-family: FZLanTingHeiS-R-GB;
				font-weight: 400;
				font-size: 20rpx;
				color: #3259A6;
				margin-top: 22rpx;
			}
		}

	}
</style>